<template>
    <!-- 上面搜索栏部分 -->
    <div class="search-box">
        <div class="flex">
            <div>
                <el-icon>
                    <Search />
                </el-icon>
                <span>筛选搜索</span>
            </div>
            <div>
                <el-button>重置</el-button>
                <el-button @click="submitFn" type="primary">查询搜索</el-button>
            </div>
        </div>
        <div style="padding-top: 20px">
            <!-- 在input里面回车会造成刷新，大家今晚可以尝试解决一下 -->
            <!-- 在有多个搜索框的情况下添加全部清空功能 -->
            <el-form @submit.prevent="submitFn" ref="searchFormRef" :model="queryparams">
                <el-form-item label="账号/姓名:" label-width="120px">
                    <!-- @keyup.enter 回车事件 -->
                    <!-- <el-input v-model="listParams.keyword" placeholder="请输入账号、姓名" @keyup.enter="submitFn" /> -->
                    <el-input v-model="queryparams.keyword" placeholder="请输入账号、姓名" />
                </el-form-item>
            </el-form>
        </div>
    </div>

    <!-- 添加按钮 -->
    <div class="add-box">
        <div class="left">
            <el-icon>
                <Tickets />
            </el-icon>
            <span>数据列表</span>
        </div>
        <el-button type="primary">添加</el-button>
    </div>

    <!-- 角色列表 -->
    <el-table :data="list" style="width: 100%">
        <el-table-column class-name="center" prop="id" label="编号" width="80px" />
        <el-table-column class-name="center" prop="name" label="角色名称" />
        <el-table-column class-name="center" prop="description" label="描述" />
        <el-table-column class-name="center" prop="adminCount" label="用户数" />
        <el-table-column class-name="center" prop="createTime" label="添加时间">
            <template #default="scope">
                <span>{{ fomatDate(scope.row.createTime) }}</span>
            </template>
        </el-table-column>

        <el-table-column class-name="center" prop="status" label="是否启用">
            <template #default="scope">
                <el-switch v-model="scope.row.status" :active-value="1" :deactive-value="0"></el-switch>
            </template>
        </el-table-column>

        <el-table-column class-name="center" label="操作">
            <template #default="scope">
                <el-button link type="primary" @click="router.push('/ums/allocResource?id=' + scope.row.id)">分配资源
                </el-button>
            </template>
        </el-table-column>
    </el-table>

    <!-- 分页 -->
    <ElConfigProvider :locale="zhCn">
        <el-pagination v-model:currentPage="queryparams.pageNum" v-model:page-size="queryparams.pageSize" background
            layout="total, sizes, prev, pager, next ,jumper" :total="total" @size-change="pageSizeChagne"
            @current-change="currentChagne" :page-sizes="[10, 20, 50, 100]" />
    </ElConfigProvider>
</template>
<script setup lang='ts'>
import { user } from "@/api";
import { reactive, toRefs } from "vue";
import { fomatDate } from "@/utils";
import zhCn from "element-plus/lib/locale/lang/zh-cn";
import { ElConfigProvider } from "element-plus";
import { useRouter } from "vue-router";
import { Search } from "@element-plus/icons-vue";


const router = useRouter();
console.log(router.getRoutes());

const state = reactive<{
    list: IRoleModel[],
    total: number
}>({
    list: [],
    total: 0
})


const queryparams: IUserListParams = {
    keyword: "",
    pageNum: 1,
    pageSize: 10,
    parentId: undefined
}


const queryRoleList = () => {
    user.queryRoleListApi(queryparams).then((res) => {
        if (res.code === 200) {
            state.list = res.data.list
            state.total = res.data.total
        }
    })
}
queryRoleList()


const submitFn = () => {
    queryRoleList()
}

const pageSizeChagne = () => {
    queryRoleList()
}

const currentChagne = () => {
    queryRoleList()
}

const { list, total } = toRefs(state)

</script>

<style lang="less" scoped>
:deep(.center) {
    text-align: center;
}

.search-box {
    padding: 20px;
    border: 1px solid #ccc;
    border-radius: 5px;
    box-shadow: 0px 0px 6px 0px gray;
    margin-bottom: 30px;

    .flex {
        display: flex;
        justify-content: space-between;
    }

    .el-icon {
        margin-right: 10px;
    }

    .el-input {
        width: 250px;
    }
}

.add-box {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px;
    margin-bottom: 20px;
    border-radius: 5px;
    box-shadow: 0 0 4px 2px #ccc;

    .left {
        display: flex;
        align-items: center;
        padding: 0 10px;

        .el-icon {
            margin-right: 10px;
        }

    }

    .el-button {
        margin-right: 10px;
    }
}
</style>